<template>
  <div class="app_content_container">
    <Breadcrumb
      :items="[{ label: '云主机', path: '/computing-mgmt/vm-list' }, '创建云主机']"
    />
    <div class="content_info">
      <BorderBox title="基本信息">
        <template #main_info><baseConfig /></template>
      </BorderBox>
      <BorderBox title="实例配置" :wrapperStyle="{ margin: '16px 0' }">
        <template #main_info><instConfig /></template>
      </BorderBox>
      <BorderBox title="高级配置">
        <template #main_info>高级配置</template>
      </BorderBox>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import baseConfig from "./baseConfig.vue";
import instConfig from "./instConfig.vue";
// import { useRoute } from "vue-router";
// import vm from "common/detailInfo/vm/index.vue";
// import { vmcolumns } from "../columns";
// import { getPluginDetail, getBkBizList, getBkCloudList, syncBk } from "@/api/pluginMgmt";

// const route = useRoute();
// const { id } = route.params;
// const { name } = route.query;
// const info = ref(null);
// import useLoading from "@/hooks/loading";
// import { Message } from "@garco-design/web-vue";
// const { loading, setLoading } = useLoading(false);

// const fetchPluginDetail = async () => {
//   try {
//     const { code, data } = await getPluginDetail(id);
//     if (code === 20000) info.value = data;
//   } catch (error) {
//     console.log(error);
//   }
// };
onMounted(() => {
  console.log("name--", name);

  // fetchPluginDetail();
});
</script>

<style lang="scss" scoped>
.content_info {
  height: calc(100vh - 132px);
}
</style>
